<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <CommonHeader />
      </el-header>
      <el-main>
        <div class="container">
          <div class="item">
            <el-row :gutter="12">
            <el-col v-for="(item, index) in noChildren()" :key="item.path" :span="60" @click="clickMenu(item)" :offset="index > 0 ? 0 : 0">
              <el-card shadow="hover" :body-style="{ padding: '0px' }">
                <component class="icons" :is="item.icon"></component>
                <div style="padding: 14px">
                  <span>{{ item.label }}</span>
                  <div class="bottom">
                    <time class="time">{{ currentDate }}</time>
                  </div> 
                </div>
              </el-card>
            </el-col>
          </el-row>
          </div>
          
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>

import { ElContainer, ElHeader, ElMain, ElRow, ElCol, ElCard } from 'element-plus'
import CommonHeader from '../components/CommonHeader.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentDate = ref(new Date())
const list = ref([
  {
    path: '/user/message',
    label: '留言板',
    icon: 'ChatLineSquare',
  },
  {
    path: '/file/home',
    label: '用户文件管理',
    icon: 'Message',
  },
  {
    path: '/rain/home',
    label: '天气预报',
    icon: 'Sunny',
  },
  {
    path: '/news/home',
    label: '新闻',
    icon: 'Collection',
  },
])
const clickMenu = (item) => {
  router.push({
    path: item.path,
  })
}
const noChildren = () => {
  return list.value.filter((item) => !item.children)
}
noChildren
const hasChildren = () => {
  return list.value.filter((item) => item.children)
}
hasChildren
</script>

<style lang="scss" scoped>
.time {
  font-size: 12px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container{
  width: auto;
  height: auto;
  opacity: 0.8; 
}

  
.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>
